<!--
 * @Date: 2024-11-25 17:23:58
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-12-25 10:12:11
 * @Description: input-cards
-->
<template>
  <div class="input-cards">
    <div class="input-card-item"
      v-for="(cartItem, i) in cardState.list"
      :key="i"
    >
      <div class="card-item-rm"
        v-if="!(config.compProps.mustHas ? (cardState.list.length === 1 && i === 0) : false)"
      >
        <ElIcon size="20px" @click.stop="delCardItem(i, cartItem)"><CircleCloseFilled /></ElIcon>
      </div>
      
      <el-form label-width="80px" label-position="left">
        <HpNodeItem
          v-for="(item, index) in cartItem.children"
          :key="index"
          :row="cartItem.row"
          :config="item"
          :schema="schema"
          :checkedNode="checkedNode"
        >
        </HpNodeItem>
      </el-form>
    </div>
    <div class="input-card-tool" v-if="cardProps.showAdd">
      <el-button @click="addCardItem">添加</el-button>
    </div>
  </div>
</template>

<script setup>
import HpNodeItem from '@hp/design/src/node/NodeItem.vue'

import { onMounted, reactive, nextTick, computed, watch } from 'vue';
import { getValueByPath, setValueByPath } from '@hp/utils/data.js'
import { deepClone, getUUID } from '@hp/utils/data.js'
import { ElIcon } from 'element-plus';
import { CircleCloseFilled } from '@element-plus/icons-vue'

const props = defineProps({
  schema: { type: Object },
  config: { type: Object },
  modelValue: {},
  checkedNode: { type: Object },
})
const cardState = reactive({
  list: []
})
const cardProps = computed(() => {
  return {
    showAdd: true,
    ...props.config.compProps
  }
})

const initCardItem = () => {
  cardState.list = []
  const { schema, config: { field, compProps } } = props
  const list = getValueByPath(schema, field) || []
  list.forEach((item, index) => {
    const children = deepClone(props.config.children)
    children.forEach(cfgItem => {
      const { field: cField } = cfgItem
      const cFields = cField.split('.')
      const startIndex = cFields.length - 1
      cFields.splice(startIndex, 0, index);
      cfgItem.field = cFields.join('.')
    })
    cardState.list.push({ id: item.id, row: item, children })
  })
  if (list.length === 0 && compProps.mustHas) {
    addCardItem()
  }
}

/**
 * 添加面板
 */
const addCardItem = () => {
  const id = getUUID()
  const cardLen = cardState.list.length
  const children = deepClone(props.config.children)
  const childItem = { id }
  children.forEach(child => {
    const { field } = child
    const fields = field.split('.')
    const startIndex = fields.length - 1
    fields.splice(startIndex, 0, cardLen);
    child.field = fields.join('.')
    const lastField = fields.slice(-1)[0]
    childItem[lastField] = ''
  })
  const childPath = `${props.config.field}.${cardLen}`
  setValueByPath(props.schema, childPath, childItem)
  const childValue = getValueByPath(props.schema, childPath)
  cardState.list.push({ id, row: childValue, children })
}
/**
 * 删除面板
 * 
 * @param i 索引
 * @param item 数据
 */
const delCardItem = (i, item) => {
  const list = getValueByPath(props.schema, props.config.field)
  cardState.list.splice(i, 1)
  list.splice(i, 1)
  setValueByPath(props.schema, props.config.field, JSON.parse(JSON.stringify(list)))
}

watch(
  () => props.schema.id,
  () => {
    initCardItem()
  },
  { immediate: true }
)

// onMounted(() => {
//   nextTick(() => {
//     initCardItem()
//   })
// })

</script>

<style lang="scss" scoped>
.input-cards {
  .input-card-item {
    position: relative;
    padding: 15px 10px;
    background: #f5f5f5;
    border-radius: 5px;
    margin-bottom: 8px;
    border: 1px solid #ececec;
    .card-item-rm {
      position: absolute;
      cursor: pointer;
      right: -6px;
      top: -6px;
      color: #f56c6c;
    }
    :deep(.el-form-item) {
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>